<template>
	<div class="box">
		<h2>动态表单（自定义表单）</h2>
		<!--导航菜单-->
		<nav class="info-nav" :class="openFlag?'nav-open':'nav-close'">
			<ul>
				<li v-for="(item,i) in modules" :key="i" :class="{'active':i==activeStep}" @click="activeStep=i">
					<a :href="openFlag?'#'+item.component:'javascript:;'">{{item.title}}</a>
				</li>
			</ul>
			<i class="arrow" :class="openFlag?'el-icon-d-arrow-right':'el-icon-d-arrow-left'" @click="openFlag=!openFlag"></i>
		</nav>
		<!--信息模块-->
		<component v-for="(item,i) in modules"
				   :key="item.component"
				   :id="item.component"
				   :ref="item.component"
				   :is="item.component"
				   @title="getTitle($event,item)"
				   @click="jump(i)">
		</component>
		<hr>
		<p>
			<router-link class="fn-link" :to="{'name':'Form'}">编辑状态,原生自定义表单</router-link> 
		</p>
	</div>
</template>

<script>
import TypeForm from "./pages/TypeForm";
import TypeRow from "./pages/TypeRow";
import TypeTable from "./pages/TypeTable";
import RelevanceTable from "./pages/RelevanceTable";
export default {
  name: "Index",
  components: { RelevanceTable, TypeTable, TypeRow, TypeForm },
  data() {
    return {
      modules: [
        {
          component: "TypeForm"
        },
        {
          component: "TypeRow"
        },
        {
          component: "TypeTable"
        },
        {
          component: "RelevanceTable"
        }
      ],
      offsetTops: [],
      activeStep: 0,
      openFlag: document.body.clientWidth > 1350
    };
  },
  mounted: function() {
    this.$nextTick(function() {
      this.init();
    });
  },
  methods: {
    init() {
      window.addEventListener("scroll", this.handleScroll);
      window.onresize = () => {
        this.openFlag = document.body.clientWidth > 1350;
      };
    },
    getTitle(val, item) {
      if (typeof item.title == "undefined") {
        this.$set(item, "title", val);
      } else {
        item.title = val;
      }
    },
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop; //滚动条高度
      let offsetTops = [];
      for (let item of this.modules) {
        offsetTops.push(
          $("#" + item.component).offset().top +
            $("#" + item.component).height() / 2
        );
      }
      let flag = true;
      offsetTops.forEach((top, i) => {
        if (flag && top >= scrollTop) {
          this.activeStep = i;
          flag = false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/ .detail-comtit {
  position: relative;
  .edit {
    position: absolute;
    right: 0;
    top: 0;
    button {
      border: none;
      background: none;
      color: #008bff;
    }
  }
}
.info-nav {
  position: fixed;
  right: 0;
  top: 40%;
  padding: 10px 0;
  width: 140px;
  border-left: 2px solid #ddd;
  background-color: #fff;
  z-index: 999;
  transition: 0.3s;
  li {
    position: relative;
    &.active {
      a {
        color: #008bff;
      }
      &:before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: 3px solid #d0eaff;
        background: #008bff;
        position: absolute;
        top: 10px;
        left: -8px;
        z-index: 999;
      }
    }
    a {
      display: block;
      line-height: 35px;
      padding: 0 20px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .arrow {
    padding: 10px 5px;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -17px;
    transition: 1s;
    &:hover {
      cursor: pointer;
      color: #008bff;
      padding-right: 1px;
    }
  }
}
.nav-close {
  width: 30px;
  border-left: none;
  background: none;
  transition: 0.3s;
  ul {
    margin-left: 50px;
  }
  .arrow {
    padding: 10px 8px;
    background-color: #fff;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    color: #008bff;
    transition: 0.3s;
    &:hover {
      padding-right: 12px;
    }
  }
}
</style>
